<template>
  <el-popover
      :placement = placementPosition
      popper-class = "song-popover"
      width = "40vw"
      trigger = "click">
    <!--启动按钮-->
    <template #reference>
      <el-button style = "border-radius: 10px">
        {{ activeItem.category2Name }}
        <i-right theme = "outline" size = "17" fill = "#000" strokeLinejoin = "miter" />
      </el-button>
    </template>
    <!--悬浮列表-->
    <el-row>
      <el-col :span = "24">
        <el-row style = "padding: 10px 0; border-bottom: 1px solid rgb(229,229,229)">
          <el-link class = "holding" :underline = "false" style = "padding: 0 20px">全部歌单</el-link>
        </el-row>
        <el-row>
          <el-col :span = "24">
            <el-row v-for = "category1Item in navList" :key = "category1Item">
              <ul class = "category-container">
                <!--一级标题-->
                <div class = "category2Name">
                  <li :key = "category2Item.category2Id"
                      v-for = "category2Item in category1Item.category1List">
                    <el-link
                        :class = "{'holding':true,'selected-tags':category2Item.category2Id == activeItem.category2Id} "
                        :underline = "false">
                      {{
                        category2Item.category2Name
                      }}
                    </el-link>
                  </li>
                </div>
              </ul>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-popover>

</template>

<script setup>

import {computed, reactive} from "vue";

const props = defineProps({
  navList: Array,
  selectedTagId: Number,
  placement: Number
})
let placementPosition = computed(() => props.placement ? 'bottom-start' : 'bottom-end')
const activeItem = reactive({
  category1Id: '1',
  category2Id: '1',
  category2Name: '华语'
})
</script>

<style lang = "less" scoped>
.song-popover {

  .category-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;

    .category1Name {
      display: flex;
      flex-wrap: nowrap;
      padding: 10px 50px 10px 0;

      span {
        margin-right: 5px;
        color: rgba(152, 150, 150, 0.6);
      }
    }

    .category2Name {
      width: 80%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      > li {
        padding: 0 40px 22px 0;
      }
    }

    .el-link {
      padding: 3px 5px;
    }


  }
}

.el-button:focus, .el-button:hover {
  color: #000;
  border-color: #989696;
  background-color: rgba(178, 177, 177, 0.3);
}

.el-button {
  padding: 8px 15px;
}

</style>